<template>
  <div>
    <el-dialog
      :center="true"
      :title="title"
      :visible.sync="formVisible"
      width="60%"
      :before-close="
        () => {
          $emit('update:formVisible', false),
          $refs['ruleForm'].resetFields();
        }
      "
      @open="open"
    >
      <div class="from_box">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          label-width="140px"
          class="demo-ruleForm"
        >
          <el-form-item label="请选择文件" prop="checkedFiled">
            <el-upload
              ref="upload"
              class="upload-demo"
              action=""
              :on-change="handleChange"
              :show-file-list="false"
              :auto-upload="false"
            >
              <el-button
                slot="trigger"
                size="small"
                type="primary"
              >选取Excel文件</el-button>
              <span style="margin-left: 30px;" class="down_box">
                <i class="el-icon-download" />
                <span @click="download">导入模板下载</span>
              </span>
            </el-upload>
          </el-form-item>
        </el-form>
        <div style="text-align: center;">
          <el-button
            type="primary"
            :disabled="tableData.length > 0 ? false : true"
            :loading="isbtn"
            @click="submitForm('ruleForm')"
          >确定</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { getToken } from '@/utils/auth'
// import { downTemplate } from '@/utils/index.js'
export default {
  props: {
    template: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    },
    formVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '导入'
    }
  },
  data() {
    return {
      list: [],
      tableData: [],
      fileContent: '',
      file: '',
      data: '',
      isbtn: false,
      ruleForm: {}
    }
  },
  methods: {
    open() {
      this.tableData = []
    },
    // 核心部分代码(handleChange 和 importfile)
    handleChange(file, fileList) {
      this.fileContent = file.raw
      const fileName = file.name
      const fileType = fileName.substring(fileName.lastIndexOf('.') + 1)
      if (this.fileContent) {
        if (fileType === 'xlsx' || fileType === 'xls') {
          this.importfile(this.fileContent)
        } else {
          this.$message({
            type: 'warning',
            message: '附件格式错误，请重新上传！'
          })
        }
      } else {
        this.$message({
          type: 'warning',
          message: '请上传附件！'
        })
      }
    },
    importfile(obj) {
      const reader = new FileReader()
      const _this = this
      reader.readAsArrayBuffer(obj)
      reader.onload = function() {
        const buffer = reader.result
        const bytes = new Uint8Array(buffer)
        const length = bytes.byteLength
        let binary = ''
        for (let i = 0; i < length; i++) {
          binary += String.fromCharCode(bytes[i])
        }
        const XLSX = require('xlsx')
        const wb = XLSX.read(binary, {
          type: 'binary'
        })
        const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
        this.data = [...outdata]
        const arr = []
        this.data.map(v => {
          const obj = {}
          obj.weight = v.重量lbs
          obj.zone2 = v.Zone2
          obj.zone3 = v.Zone3
          obj.zone4 = v.Zone4
          obj.zone5 = v.Zone5
          obj.zone6 = v.Zone6
          obj.zone7 = v.Zone7
          obj.zone8 = v.Zone8
          obj.disabled = false
          arr.push(obj)
        })
        _this.tableData = _this.tableData.concat(arr)
      }
    },
    // 下载
    download() {
      const vm = this
      vm.$emit('download')
    },
    // 关闭
    handleCancel() {
      this.list = []
      this.$emit('update:formVisible', false)
    },
    // 确认
    submitForm() {
      this.$emit('changeData', this.tableData)
      this.handleCancel()
    }
  }
}
</script>

<style lang="scss" scoped>
.down_box {
  cursor: pointer;
}
</style>
